<template>
	<view class="content">
		<view class="login-title">
			<view class="login-title1">手机号快捷登录</view>
			<view class="login-title2"></view>
		</view>
		<view class="login-content">
			<view class="login-content-top">
				<view class="login-content-top1">账号</view>
				<view class="login-content-top2">
					<input type="text" value="" placeholder="请输入手机号"  v-model="shouji" @blur="goYanzhengma" />
				</view>
				
			</view>
			<!-- <view class="login-content-bottom">
				<view class="login-content-bottom1">密码</view>
				<view class="login-content-bottom2">
					 <input type="password" value="" placeholder="请输入密码" v-model="password" />
				</view>
			</view> -->
			<view class="login-content-bottom">
				<view class="login-content-bottom1">图片验证码</view>
				 <input type="text" value="" placeholder="请输入图片验证码" placeholder-class="sjhinput" v-model="tucode"/>
				 <image @click="goClicktu" mode=""  :src='tuimgs' class="tuimgs" v-if="iscodetu1==2"></image>
			</view>
			<view class="login-content-bottom">
				<view class="login-content-bottom1">验证码</view>
				<view class="login-content-bottom2">
					<input type="text" value="" placeholder="请输入短信验证码" placeholder-class="sjhinput" v-model="yanzhengma" />
					<button class="yzm" @click="getCode" :disabled="btnDis">{{btnText}}</button>
				</view>
			</view>
		<!-- 	<view class="login-content-bottom">
				<view class="login-content-bottom1">邀请码</view>
				<input type="text" value="" placeholder="请输入邀请码(非必填)" placeholder-class="sjhinput" v-model="invitation" />
			</view>
			<view class="login-yh">
				<radio-group @click="radioChange">
				      <label class="radio">
				       <radio :checked="check" color="#8DCE2C" />
				      </label>
				     </radio-group>
				 已阅读并同意<text style="color: #FF7900;">《用户协议》</text>
	
						</radio-group>
				
			</view> -->
		</view>
		<!-- 按钮 -->
		<view class="bottom-btn">
			<view class="bottom-btn1" @click="goLogin">
				登录
			</view>
		</view>
		
		<!-- 111111111111111 -->
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				 shouji: '', // 手机号
				        yanzhengma: '', // 验证码
				        password: '', // 密码
				        xieyi: true, // 协议
				        // 验证码倒计时数据
				        btnText: '获取验证码',
				        btnDis: false, // 发送验证码按钮不禁用
						tuimgs:'',
						// 图形验证码数据
						tucode:'',
						// 邀请码
						invitation: '',
						sb: '',
						check: false,
						// 默认图形验证码不显示
						iscodetu1: 1
			};
		},
		onShow() {
			// 获取图形验证码
			this.goClicktu()
			
		},
		methods:{
			// goLogin() {
			// 	uni.navigateTo({
			// 		url: './login'
			// 	})
			// },
		radioChange: function() {
		    this.check = !this.check
		   },
			goYanzhengma() {
				this.goClicktu()
			}
			,
			// 跳转登录按钮
			goLogin() {
				var that = this
				that.$http.req.ajax({
				     path: ':8066/web/lxUser/loginCode',
				     data: {
				     telPhone:that.shouji,
					 phoneCode:that. yanzhengma
				     },
				     afterAjax: (res) => {
						 		console.log(res.data,'手机号快捷登录成功')
						if(res.code==200){
							console.log(res,'手机号快捷登录成功')
							uni.showToast({
								title:'手机号快捷登录成功'
							})
							
							uni.setStorageSync('token',res.token)
							uni.setStorageSync('userId',res.userId)
							setTimeout( () => {
							  uni.switchTab({
							  	url:'../home/home'
							  })
							}, 500)
							
							
						}
						 	
				     }
				    })
			},
			goClicktu() {
				var that = this
				that.$http.req.ajax({
				     path: ':8066/web/lxUser/getImageCode',
				     data: {
				     telPhone:that.shouji,
				     code:'1'
				     },
				     afterAjax: (res) => {
						 		console.log(res.img,'1111')
						 		if (res.code !== 200) {
						 			uni.showToast({
						 				title: '获取图片验证码错误',
						 				icon: 'none'
						 			})
						 			console.log(res.img)
						 			
						 		}
						 		if (res.code == 200) {
						 			that.iscodetu1 = 2
						 			console.log('进来了吗', that.iscodetu1)
						 			that.tuimgs = res.img
						 		}
						 	
				     }
				    })
				// uni.request({
				// 	url:':8066/web/lxUser/getImageCode',
				// 	method:'post',
				// 	data:{
				// 		telPhone:that.shouji,
				// 		code:'1'
				// 	},
				// 	success(res) {
				// 		console.log(res,'1111')
				// 		that.tuimgs = res.data.img
				// 		console.log(res.img)
				// 	}
				// })
			
			},
		 back() {
		        uni.navigateBack()
		      },
		      // 检查手机号是否存在
		      isshouji(){
		        
		      },
		      // 获取验证码
		      getCode: function() {
		        //手机号校验
		        if (!(/^1[34578]\d{9}$/.test(this.shouji))) {
		          console.log("手机号格式错误")
		          uni.showToast({
		            title:'手机号格式错误',
		            icon:'none'
		          })
		
		        }else{
		          var that = this
		          that.$http.req.ajax({
		               path: ':8066/web/lxUser/getCodeMsg',
		               data: {
		                telPhone: that.shouji,
		                code:2,
		          	  imageCode:that.tucode
		               },
		               afterAjax: (res) => {
		               }
		              })
		          // 开启倒计时
		          this.countDown();
		        }
		      },
		      // 验证码倒计时
		      countDown() {
		        // 初始化定时器
		        let t = null;
		        // 倒计时1分钟
		        let timer = 60;
		        // 按钮禁用
		        this.btnDis = true;
		        // 计时器清零
		        clearInterval(t);
		        // 按钮显示时间
		        this.btnText = `${timer}s`;
		        t = setInterval(() => {
		          // 当倒计时完时，显示重新发送,按钮开启
		          if (timer == 0) {
		            clearInterval(t);
		            this.btnText = "重新发送";
		            this.btnDis = false;
		            return;
		          }
		          // 实现倒计时效果
		          timer--;
		          this.btnText = `${timer}s`;
		        }, 1000)
		      },
		
		
		      // 立即注册
		      lijizhuce() {
		        // 判断验证码
		      if(this.yanzhengma==''){
		        uni.showToast({
		          title:'请输入验证码',
		          icon:'none'
		        })
		        return
		      }
		 
		      // 判断密码长度
		      if(this.password.length<6||this.password.length>16){
		        uni.showToast({
		          title:'密码长度为6-16位',
		          icon:'none'
		        })
		        return
		      }
		      if(this.xieyi==false){
		        uni.showToast({
		          title:'请阅读并同意隐私协议',
		          icon:'none'
		        })
		        return
		      } 
		      // 判断手机号码是否存在
		     var that = this
		     
		         uni.request({
		           url:that.baseUrl+"api/user/checkuser",
		           method:"post",
		           header : {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
		           data:{
		          mobile:that.shouji
		           },
		           success(res) {
		           console.log(res,'验证是否正确')
		           if(res.data.code==1){
		             uni.showToast({
		               title:'用户已存在请登录',
		               icon:'none'
		             })
		            setTimeout( () => {
		               uni.navigateTo({
		                 url:'./login'
		               })
		             }, 1000)
		             return
		             }else{
		               // 立即注册
		               uni.request({
		                 url:that.baseUrl+"api/user/register",
		                 method:"post", 
		                 header : {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
		                 data:{
		                mobile:that.shouji,
		                password:that.password,
		                code:that.yanzhengma
		                 },
		                 success(res) {
		                 console.log(res,'注册')
		                 if(res.data.code==1){
		                   uni.showToast({
		                     title:'注册成功,请登录！',
		                     icon:'none'
		                   })
		                  setTimeout( () => {
		                     uni.navigateTo({
		                       url:'./login'
		                     })
		                   }, 1000)
		                   }
		                 
		                 }          
		               })
		             }
		           
		           }          
		         })
		      }
		}
	}
</script>

<style lang="scss">
.content {
		width: 750rpx;
		margin: 0 auto;
		.login-title {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			.login-title1 {
				font-size: 43rpx;
			}
			.login-title2 {
				width: 86rpx;
				height: 7rpx;
				background-color: #fcda22;
			}
		}
		.login-content {
			margin: 0 54rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			.login-content-top, .login-content-bottom {
				margin: 36rpx 0;
				border-bottom: 1rpx solid #f5f5f5;
				.login-content-top1, .login-content-bottom1 {
					font-size: 21rpx;
				}
				.login-content-top2 {
					margin: 18rpx 0;
					font-size: 25rpx;
					input {
						background-color: #FFFFFF;
						font-size: 25rpx;
						font-weight: 600;
					}
				}
				.login-content-bottom2 {
					margin: 18rpx 0;
					color: #f5f5f5;
					font-size: 25rpx;
					input {
						background-color: #FFFFFF;
						color: #000000;
						font-size: 25rpx;
						font-weight: 600;
					}
					
					.yzm {
						width: 190rpx;
						font-size: 21rpx;
					}
				}
			}
			.login-yh {
				font-size: 21rpx;
				margin-left: 50rpx;
			}
			
		}
		// 按钮
		.bottom-btn {
			margin: 54rpx 54rpx 0 54rpx;
			.bottom-btn1, .bottom-btn2 {
				background-color: #fcda22;
				border-radius: 36rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-size: 25rpx;
				margin: 21rpx 0;
			}
			.bottom-btn2 {
				background-color: #20212d;
				color: #fcda22;
			}
		}
		.wj {
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.wj1 {
				font-size: 21rpx;
				color: #21201d;
				border-bottom: 1rpx solid #21201d;
				width: 168rpx;
				text-align: center;
				margin: 0 auto;
			}
		}
		.sjhinput {
			background-color: #FFFFFF;
			color: #f5f5f5;
			font-size: 25rpx;
			font-weight: 600;
		}
		.tuimgs {
			background-color: #f5f5f5;
			width: 200rpx;
			height: 100rpx;
			
		}
}
</style>
